<template>
	<div class="menu_one">
		<ol>
			<li v-for="item in list" :key="item.id">
				<p>
					<img :src="item.img"/>
				</p>
				<aside>
					<span v-if="item.title!=undefined">{{item.title}}</span>
					<p>{{item.txt}}</p>
					<label v-if="item.price!=undefined">￥<strong>{{item.price}}</strong><a>起</a></label>
					<em>{{item.time}}</em>
				</aside>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Menu_one',
		data(){
			return{
				list:[
					{id:1,img:'oneimg/1.jpg'},
					{id:2,img:'oneimg/2.jpg',title:'丽江出发',txt:'[梅里转山·跨年特辑]12.26~1.1！2022朝圣梅里雪山，徒步雨崩村-冰湖-神瀑，7日轻装徒步（新增：千人长桌宴+锅庄舞跨年夜+转经筒新年祈福）',price:'1980',time:'7天6晚'},
					{id:3,img:'oneimg/3.jpg',title:'拉萨出发',txt:'[冬游西藏 • 梦幻蓝冰A线]燃灯节特辑招募！普莫雍措-扎寺-珠峰大本营-喜马拉雅-多情措-羊卓雍措！★拉萨3晚四钻酒店，可自选升级洲际！去世界屋脊寻找“蓝精灵”！7日！',price:'2880',time:'7天6晚'},
					{id:4,img:'oneimg/4.jpg',title:'成都出发',txt:'[冰雪九寨环线]12-2月，避开旺季人群纷扰，邂逅冬日静谧九寨黄龙，撒欢毕棚沟，登达古冰川，两晚轻享九寨沟五星度假体验，打卡抖音同款华美达温泉酒店，冬游川西7日深度游！',price:'4080',time:'7天6晚'},
					{id:5,img:'oneimg/5.jpg',title:'成都出发',txt:'[内测邀请·牛背山摄影4日]12.18确定成行，阔别六载，牛背山内测；牛背山星辰营地-双流彭镇老茶馆-荥经砂锅，无需徒步上山，4日精品摄影团。',price:'3180',time:'7天7晚'},
					{id:6,img:'oneimg/6.jpg',title:'丽江出发',txt:'[徒步雨崩]游侠客高海拔徒步TOP1（所有批次独立成团），朝圣梅里雪山，徒步雨崩村-冰湖-神瀑，7日轻装徒步之旅（免费借用登山杖、颁发纪念奖牌、全程标间独卫）',price:'1980',time:'5天4晚'},
					{id:7,img:'oneimg/7.jpg',title:'贵阳出发',txt:'【生态常州】寻找最纯真的乐趣',price:'2980',time:'5天4晚'},
					{id:8,img:'oneimg/8.jpg',title:'牛背山出发',txt:'[牛背山内测计划·星辰营地代订]360°观景平台·正对蜀山之巅：贡嘎雪山/天气好6绝：云瀑星空·日照金山·夕阳佛光·壮美雪山｜轻奢营帐·美景入户·含早餐',price:'780',time:'2天1晚'},
					{id:9,img:'oneimg/9.jpg',title:'贵州出发',txt:'[冬日奇幻川西]12.30批次确定发团！海螺沟冰川-四姑娘山双桥沟-鱼子西秋千-雅家梗红石滩-雅拉雪山-墨石公园-贡嘎雪山-新都桥，川西冰雪温泉5日深度游！',price:'3380',time:'6天5晚'},
					{id:10,img:'oneimg/10.jpg',title:'南宁出发',txt:'[田园靖西]11-3月暖冬季：南宁-通灵大峡谷-渠洋湖-靖西鹅泉-德天瀑布-明仕田园，4天3夜深度之旅！（批批入住明仕山庄）：',price:'2890',time:'5天5晚'},
				]
			}
		},
		
			
		
		
	}
</script>

<style scoped>
	.menu_one{
		width: 100%;
		overflow: hidden;
		background-color: #efefef;
	}
	.menu_one ol li{
		width: 48%;
		margin: 1%;
		float: left;
		border-radius: 0.6rem;
		background-color: white;
		position: relative;
	}
	.menu_one li:first-child img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem;
	}
	.menu_one li:first-child{
		width: 48%;
		height: 16rem;
	}

	.menu_one li img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem 0.6rem 0 0;
	}
	.menu_one li span{
		position: absolute;
		top: 0;
		right: 0;
		padding: 0.5rem 1rem;
		background-color: rgba(0,0,0,0.6);
		border-radius: 0 0.5rem 0 0.5rem;
		color: white;
	}
	.menu_one li aside p{
		margin: 0.2rem 0.5rem;
		font-weight: bold;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
	}
	.menu_one li aside label{
		display: block;
		padding: 0.2rem 0.5rem;
		float: left;
		color: gray;
	}
	.menu_one li aside label strong{
		color: orange;
		font-weight: bold;
		font-size: 1rem
	}
	.menu_one li aside em{
		padding: 0.2rem 0.5rem;
		float: right;
		color: #808080;
	}
	.menu_one li:nth-of-type(even){
		margin-top: 1rem;
	}
</style>
